<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <style>
        table {

            /* border-top: 1px solid #333;  */
           
            /* border-spacing:0; */
            /* 边框线合并 */
            border-collapse: collapse;
            width: 312px;
            height: 170px;
            /* border:1px solid #f4f4f4; */
            margin:auto;
        
            } 

        table tr td {
             border: 1px solid #f4f4f4;  
               /* border-right:1px solid #f4f4f4;  */
              /* border-bottom:1px solid #f4f4f4;  */
            font-size:x-small;
            
            text-align: center;
        }

        table tr:nth-child(1){
            width:77px;
            height:80px;
        }   

        table tr:nth-child(1) td:nth-child(1) {
            background: url(img/01.png) no-repeat  center center ;
           
            border-left:none ;
            width:77px;
            height:80px;
    
        }

        table tr:nth-child(1) td:nth-child(2) {
            background: url(img/02.png) no-repeat center center;
        }

        table tr:nth-child(1) td:nth-child(3) {
            background: url(img/03.png) no-repeat center center;
        }

        table tr:nth-child(1) td:nth-child(4) {
            background: url(img/04.png) no-repeat center center;
            border-right:none ;
        }




        table tr:nth-child(2) td:nth-child(1) {
            background: url(img/05.png) no-repeat center center;
            border-left:none ;
        }
        table tr:nth-child(2) td:nth-child(2) {
            background: url(img/06.png) no-repeat center center;
        }
        table tr:nth-child(2) td:nth-child(3) {
            background: url(img/07.png) no-repeat center center;
        }
        table tr:nth-child(2) td:nth-child(4) {
            background: url(img/08.png) no-repeat center center;
            border-right:none ;
        }
        table tr td p{
           padding-top: 50px;  
           color: #333333
             /* 文字位置 */
        }
      
    </style>
</head>

<body>
    <table>
        <tr>
            <td>
                <p>充话费</p>
            </td>
            <td>
                <p>旅行</p>
            </td>
            <td>
                <p>车险</p>
            </td>

            <td>
                <p>游戏</p>
            </td>
        </tr>
        <tr>
            <td>
                <p>彩票 </p>
            </td>
            <td>
                <p>电影</p>

            </td>
            <td>
                <p>酒店</p>
            </td>
            <td>
                <p>理财</p>
            </td>



        </tr>

    </table>

</body>

</html>